<!-- @format -->

<template>
  <van-field
    :model-value="selectValue"
    readonly
    :label="title"
    :placeholder="placeholder || `请选择${title}`"
    @click-input="clickSelect"
  >
    <template #button>
      <slot name="button"></slot>
    </template>
  </van-field>

  <van-popup
    v-model:show="visible"
    position="bottom"
    style="height: 100vh;"
  >
    <div class="select_speaker">
      <van-sticky>
        <van-nav-bar
        title="选择讲者"
          left-text="取消"
          right-text="确认"
          @click-left="clickCancel"
          @click-right="clickConfirm"
        />
        <base-search
          placeholder="请输入讲者姓名、医院、科室搜索"
          @search="getSpeakerList"
        ></base-search>
        <div class="select_list">
          <div class="select_list_box">
            <div
              v-for="(item, index) in selectList"
              v-key="item.id || item.speakerId"
              class="select_list_item"
            >{{ item.speakerName || item.name }} <van-icon name="cross" @click="clickDelete(item, index)" /></div>
          </div>
        </div>
      </van-sticky>
      <div class="vol_meeting_list">
        <van-empty
          v-if="speakerList.length == 0"
          image="//projectimg-1256680128.cos.ap-beijing.myqcloud.com/lpm/bd4d50fd-1214-423a-bbe8-2bc72dbd45b3.png"
          image-size="80"
          description="没有搜索到对应的讲者"
        />
        <van-cell
          v-for="(item, index) in speakerList"
          :key="`indexitemspeaker${index}`"
          :class="getCellClass(item)"
          :title="item.name"
          :value="item.department"
          :label="item.hospital"
          is-link
          @click="clickSelectSpeaker(item)"
        />
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { computed, toRefs, ref, inject, onMounted } from 'vue'
import { showToast } from 'vant'

const props = defineProps({
  modelValue: {
    type: Array,
    default: [],
  },
  list: {
    type: Array,
    default: [],
  },
  title: {
    type: String,
    default: '',
  },
  speakerFormat: {
    type: Function,
    default: null
  },
  placeholder: {
    type: String,
    default: '',
  }
})
const emits = defineEmits(['update:modelValue'])
const api = inject('api')

const speakerList = ref([])
const visible = ref(false)
const selectList = ref([])

const selectValue = computed(() => {
  const { modelValue } = toRefs(props)
  return (modelValue.value || []).map(item => item.name || item.speakerName).join('、')
})

function getSpeakerList(val = '') {
  api.speakerList({
      limit: 1000,
      isAll: true,
      page: 1,
      search: val,
      needSearchConfig: 1
  }).then(res => {
    if (!res.code) {
      speakerList.value = res.data.list
    }
  })
}
function getCellClass (item) {
  const isExist = selectList.value.some(val => {
    return val.id === item.id || val.speakerId === item.id
  })
  return isExist ? 'active' : ''
}
function clickSelect() {
  const { modelValue } = toRefs(props)
  const list = JSON.parse(JSON.stringify(modelValue.value))
  selectList.value = list.filter(item => item.speakerId || item.id)
  visible.value = true
}
function clickCancel() {
  visible.value = false
}

function clickDelete (item, index) {
  selectList.value.splice(index, 1)
}

function clickSelectSpeaker (item) {
  const index = selectList.value.findIndex(val => [val.id, val.speakerId].includes(item.id))
  if (index != -1) {
    selectList.value.splice(index, 1)
  } else {
    selectList.value.push(item)
    showToast(`已选择${item.speakerName || item.name}`)
  }
 
}
function clickConfirm() {
  if (!selectList.value.length) {
    showToast('请选择讲者')
    return
  }

  const { speakerFormat } = toRefs(props)
  if (speakerFormat.value) {
    emits('update:modelValue', speakerFormat.value(selectList.value))
  } else {
    emits('update:modelValue', selectList.value)
  }
  clickCancel()
}

onMounted(() => {
  getSpeakerList();
})
</script>

<style lang="less">
 
</style>
